<template>
  <div class="cascader-power-tree-dom-search-list-box" v-loadmore="loadmoreOptions">
    <div class="tree-dom-list-item" v-for="(item) in page.list" :key="`search-${item.key}`" @click.stop="chooseItem(item)">
      <div class="flex-x al-c flex-1 tree-dom-list-item-content" :class="returnItemClass(item)">
        <slot>
          <span class="overHideCon-1 mar-l-8 flex-1">{{ item.label }}</span>
        </slot>
      </div>
    </div>
    <div class="flex-x al-c data-tips" v-if="isMounted">
      {{ loading ? $t('common.base.loading') : !page.list.length ? `${$t('common.base.noData')}` : !page.hasNextPage ? `${$t('common.base.tip.noMoreData')}` : `${$t('common.base.tip.loadMore')}` }}
    </div>
  </div>
</template>
<script>
import { computed, defineComponent, onMounted, ref, watch, nextTick } from 'vue';
import { initBaseSearchListItem } from '@src/component/compomentV2/cascaderPower/common';
import Page from '@model/Page';
import { debounce, cloneDeep } from 'lodash';
export default defineComponent({
  name: 'CascaderPowerTreeDomSearchListBox',
  emits: ['nextList'],
  props: {
    rootOptions: {
      type: Object,
      default: () => ({}),
    },
  },
  setup(props, { emit }) {
    const page = ref(new Page({ pageSize: 20 }));
    const loading = ref(false);
    const rootProps = computed(() => props.rootOptions);
    const checkObj = ref({});
    function setcheckObj(val) {
      checkObj.value = cloneDeep(val);
    }
    let isMounted = ref(false);
    function getDataList(refresh = false, params = {}) {
      if (!page.value.hasNextPage && !refresh) return;
      if (refresh === true) {
        page.value.list = [];
      }
      const { getListFnc } = rootProps.value;
      const { pageSize, pageNum, list } = page.value;
      if (getListFnc) {
        loading.value = true;
        getListFnc({ pageSize, pageNum, params }).then(res => {
          if (res.status === 0) {
            const res_ = res.data || res.result;
            let page_ = new Page(res_);
            let list_ = initBaseSearchListItem(res_.list, rootProps.value);
            page_.list = [...list, ...list_];
            page_.pageNum++;
            page.value = page_;
          }
          loading.value = false;
          nextTick(() => {
            isMounted.value = true;
          });
        });
      }
    }

    const loadMore = debounce(function () {
      if (!isMounted.value) return console.log('not mounted');
      getDataList(false);
    }, 500);
    function chooseItem(i) {
      emit('chooseItem', i);
    }
    function search(keyword) {
      getDataList(true, { keyword });
    }
    const loadmoreOptions = computed(()=>{
      return {
        disabled: !page.value.hasNextPage,
        distance: 100,
        callback: loadMore,
      }
    });
    function returnItemClass(item) {
      let checkObj_ = checkObj.value;
      if (checkObj_[[item.key]] === true) {
        return 'choosed-item';
      }
      return '';
    }
    onMounted(() => {});
    return {
      rootProps,
      page,
      loading,
      getDataList,
      chooseItem,
      loadMore,
      search,
      returnItemClass,
      checkObj,
      setcheckObj,
      isMounted,
      loadmoreOptions,
    };
  },
});
</script>
<style lang="scss" scoped>
@import './searchListBox.scss';
</style>
